<template>
    <div>
        <panel title="账号列表">
        <template >
            <el-table
                ref="multipleTable"
                :data="list"
                @selection-change="selectionChange">


                <el-table-column
                type="selection">
                </el-table-column>


                <el-table-column
                prop="account"
                label="账号">
                </el-table-column>


                <el-table-column
                prop="userGroup"
                label="用户组">
                </el-table-column>


                <el-table-column
                prop="ctime"
                label="创建时间">
                <!-- 方法一：时间 -->
                <!-- <template #default="{row}">
                  <span>{{ row.ctime | formaDate }}</span>
                </template> -->

                <!-- 方法二 -->
                <template slot-scope="scope">
                  <span>
                    {{scope.row.ctime | formaDate}}
                  </span>
                </template>
                </el-table-column>


                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)">编辑</el-button>
                        
                          <el-popconfirm
                        title="确定删除？"
                        @confirm="removeAcc(scope)"
                      >
                        <el-button slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>


                <el-pagination
                @current-change="pageChange"
                :current-page="pageinfo.currentPage"
                :page-size="pageinfo.pageSize"
                @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>


            <span>
              <template>
                <el-button  style="marginTop:20px;" type="danger" @click="batchDel">批量删除</el-button>
              </template>
                <el-button type="primary">取消选择</el-button>
            </span>

        </template>
    </panel>

        <el-dialog title="修改账号" :visible.sync="dialogFormVisible">
          <!-- <el-form>
            <el-form-item label="账号">
              <el-input v-model="form.account"></el-input>
            </el-form-item>

            <el-form-item label="用户组">
              <el-select v-model="form.userGroup">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="course">确 定</el-button>
          </div> -->
          <account-from type="edit" @success="success" :defaultForm="form"></account-from>
        </el-dialog>

    </div>
</template>

<script>
import {
  userDelReq,
  userListReq,
  userBatchdelReq,
  editUserInfo
} from "../../api/account.api.js";
import AccountFrom from "../account/components/AccountFrom.vue";
import dayjs from "dayjs";
import cloneDeep from "lodash/cloneDeep";

export default {
  data() {
    return {
      // 弹窗显示与隐藏
      dialogFormVisible: false,
      pageinfo: {
        currentPage: 1,
        pageSize: 5
      },
      // 账号列表
      list: [],
      // 分页总数
      total: 0,
      // 批量删除的
      ids: "",
      form: {}
      // form: {
      //   id: "",
      //   account: "",
      //   userGroup: ""
      // }
    };
  },
  components: {
    AccountFrom
  },
  // 时间
  filters: {
    formaDate(date) {
      let str = dayjs(date).format("YYYY/MM/DD");
      return str;
    }
  },
  methods: {
    success(form) {
      editUserInfo(form).then(res => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.getData();
        }
      });
    },
    // 确定修改账号
    // async course() {
    //   console.log(this.form);
    //   let res = await editUserInfo(this.form);
    //   this.dialogFormVisible = false;
    //   let { code, msg } = res;
    //   if (code == 0) {
    //     //关闭模态框
    //     this.dialogFormVisible = false;
    //     this.getData();
    //   }
    //   this.getData();
    // },
    // 编辑
    edit(row) {
      this.form = row;
      // 深拷贝
      // this.form = cloneDeep(row);
      // 弹出弹框
      this.dialogFormVisible = true;
    },

    selectionChange(selection) {
      this.ids = JSON.stringify(selection.map(item => item.id));
    },

    // 批量删除
    batchDel() {
      userBatchdelReq(this.ids).then(res => {
        if (res.data.code === 0) {
          this.$message.success("删除成功");
          this.getData();
        }
      });
    },

    // 每页多少条
    sizeChange(pageSize) {
      this.pageinfo.pageSize = pageSize;
      this.getData();
    },

    // 页码的改变
    pageChange(currentPage) {
      // 改变页码
      this.pageinfo.currentPage = currentPage;
      this.getData();
    },

    // 获取数据
    getData() {
      userListReq(this.pageinfo.currentPage, this.pageinfo.pageSize).then(
        res => {
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },

    // 删除
    removeAcc({ row }) {
      console.log(row.id);
      userDelReq(row.id).then(res => {
        this.getData();
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
.account_list {
  display: flex;
  justify-content: space-around;
}
</style>